<template>
    <div class="canvas1" ref="canvasRef"></div>
  </template>
  
  <script setup>
  import * as echarts from "echarts";
  import { ref, onMounted, onUnmounted } from "vue";
  const canvasRef = ref(null);
  const myEchart = ref(null);
  onMounted(() => {
    myEchart.value = echarts.init(canvasRef.value);
    let option = {
      tooltip:{},
      // 极坐标轴
    //   polar: {
    //     // center: [0, 0],  //圆心的位置
    //     radius: ['10%', '100%']
    //   },
    //   radiusAxis: {
    //     type: 'category', 
    //     data: ['d1', 'd2', 'd3', 'd4', 'd5']
    //   },
    //   angleAxis: {
    //     type: 'category', 
    //     data: ['1:00', '2:00', '3:00', '4:00', '5:00'],
    //     startAngle: 0,
    //   },
      // 单轴
      singleAxis: {
        type: 'category', 
        data: ['d1', 'd2', 'd3', 'd4', 'd5']
      },
      series: [
        {  
            type: 'scatter', //单轴通常用来画散点图
            coordinateSystem: 'singleAxis',
            data: [1,2,3,4,5]
        },
        // {
        //     type: 'bar', 
        //     coordinateSystem: 'polar', 
        //     data: [[2, 0], [1, 1]]
        // }
      ],
    };
    myEchart.value.setOption(option);
  });
  onUnmounted(() => {
    myEchart.value.dispose(canvasRef.value);
  });
  </script>
  
  <style lang="less" scoped>
  .canvas1 {
    width: 800px;
    height: 400px;
    position: relative;
  }
  </style>
  